
import {
    Divider,
    ColorPicker,
    InputNumber,
    Select,
} from 'antd'

import { ThemeBackImageList } from '../Config/theme'
import { BackGrundType, BackGrundTypeConfig } from '../Config/BackGrundType'


const BackTypeMapping = [
    { label: '纯色背景', value: 'Color' },
    { label: '图片背景', value: 'Image' },
    { label: '背景墙', value: 'Ground' },
]

const BackImageMapping = [
    { label: '图片一', value: 'ThemeImageA01' },
    { label: '图片二', value: 'ThemeImageA02' },
    { label: '图片三', value: 'ThemeImageA03' },
    { label: '图片四', value: 'ThemeImageA04' },
    { label: '图片五', value: 'ThemeImageA05' },
    { label: '图片六', value: 'ThemeImageA06' },
    { label: '图片七', value: 'ThemeImageA07' },
]

const BackGrundMapping = [
    { label: '矩形棋盘格', value: 'GrundTypeA01' },
    { label: '菱形棋盘格', value: 'GrundTypeA07' },

    { label: '类型A02(45度条纹)', value: 'GrundTypeA02' },
    { label: '类型A03(平铺小方块)', value: 'GrundTypeA03' },
    { label: '类型A04(菱形格)', value: 'GrundTypeA04' },
    { label: '类型A05(45度立体方块)', value: 'GrundTypeA05' },
    { label: '类型A06(圆头波浪纹)', value: 'GrundTypeA06' },
    { label: '类型A08(纯色方格纹)', value: 'GrundTypeA08' },
    { label: '类型A09(错位点阵)', value: 'GrundTypeA09' },
    { label: '类型A10(平铺点阵)', value: 'GrundTypeA10' },
    { label: '类型A11(横向圆环)', value: 'GrundTypeA11' },
    { label: '类型A12(四格点阵)', value: 'GrundTypeA12' },
    { label: '类型A13(竖向立体方格)', value: 'GrundTypeA13' },
    { label: '类型A14(双层菱形图)', value: 'GrundTypeA14' },
    { label: '类型A15(双头小条纹)', value: 'GrundTypeA15' },
    { label: '类型A16(平铺水波纹)', value: 'GrundTypeA16' },
    { label: '类型A17(3D竖向流体)', value: 'GrundTypeA17' },
    { label: '类型A18(45度波纹图)', value: 'GrundTypeA18' },
    { label: '类型A19(大小波纹图)', value: 'GrundTypeA19' },
    { label: '类型A20(菱形波纹图)', value: 'GrundTypeA20' },
]


import { themeStore } from '../Config/zustand'
const SetSystemTHEME = () => {
    const { theme, updateTheme } = themeStore()
    const { color, maskColor, maskPx, backType, backColor, backImage, backGrundType, grundStyle } = theme

    const ThemeFunc = (key, value) => {
        theme[key] = value
        updateTheme(theme)
    }

    return (
        <div className='SetSystemTHEME'>
            <Divider orientation="left" >主题设置</Divider>
            <div
                className='simulationTheme'
                style={backType === 'Color' ? { background: backColor } :
                    backType === 'Ground' ? BackGrundType[backGrundType](grundStyle) : {}
                }
            >
                <div className='Mask' style={{ background: maskColor, backdropFilter: `blur(${maskPx}px)` }} />
                {backType === 'Image' && <img className='Image' src={ThemeBackImageList[backImage]} alt="" />}
                <div className='Left'>
                    <div className='Label'>
                        <div>主题色</div>
                        <ColorPicker
                            value={`rgba(${color},1)`}
                            onChangeComplete={e => ThemeFunc('color', `${e.metaColor.r},${e.metaColor.g},${e.metaColor.b}`)}
                        />
                    </div>
                    <div className='Label'>
                        <div>遮罩层颜色</div>
                        <ColorPicker value={maskColor} onChangeComplete={e => ThemeFunc('maskColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>遮罩层比例</div>
                        <InputNumber value={maskPx} onChange={(e) => ThemeFunc('maskPx', e)} />
                    </div>
                    <div className='Label'>
                        <div>背景类型</div>
                        <Select value={backType} options={BackTypeMapping} onChange={e => ThemeFunc('backType', e)} />
                    </div>

                    {backType === 'Color' &&
                        <div className='Label'>
                            <div>背景纯色</div>
                            <ColorPicker value={backColor} onChangeComplete={e => ThemeFunc('backColor', e.toHexString())} />
                        </div>
                    }
                    {backType === 'Image' &&
                        <div className='Label'>
                            <div>图片背景</div>
                            <Select value={backImage} options={BackImageMapping} onChange={e => ThemeFunc('backImage', e)} />
                        </div>
                    }
                    {backType === 'Ground' &&
                        <div className='Label'>
                            <div>背景墙</div>
                            <Select
                                value={backGrundType}
                                options={BackGrundMapping}
                                onChange={e => {
                                    theme.backGrundType = e
                                    theme.grundStyle = BackGrundTypeConfig[e]
                                    updateTheme(theme)
                                }}
                            />
                        </div>
                    }
                </div>
                {backType === 'Ground' &&
                    <div className='Right'>
                        <div className='title'>背景墙设置</div>
                        {(() => {
                            return Object.keys(grundStyle).map(key => {

                                if (key.includes('color')) {
                                    return (
                                        <div className='Label' key={key}>
                                            <div>{key}</div>
                                            <ColorPicker
                                                value={grundStyle[key]}
                                                onChangeComplete={e => {
                                                    grundStyle[key] = e.toHexString()
                                                    theme.grundStyle = grundStyle
                                                    updateTheme(theme)
                                                }}
                                            />
                                        </div>
                                    )
                                }
                                if (key.includes('size')) {
                                    return (
                                        <div className='Label' key={key}>
                                            <div>{key}</div>
                                            <InputNumber
                                                value={grundStyle[key]}
                                                onChange={e => {
                                                    grundStyle[key] = e
                                                    theme.grundStyle = grundStyle
                                                    updateTheme(theme)
                                                }}
                                            />
                                        </div>
                                    )
                                }
                            })
                        })()}
                    </div>
                }
            </div>
        </div>
    );
};

export default SetSystemTHEME;